<template>
	<div class="echarts-box" style="width: 100%; height: 100%">
		<Echart :options="options" id="bar3Chart"></Echart>
	</div>
</template>

<script>
import { graphic } from "echarts";
const basicColors = [
	["#ABDCFF", "#0396FF"],
	["#90F7EC", "#32CCBC"],
	["#FFF6B7", "#F6416C"],
	["#E2B0FF", "#9F44D3"],
	["#43CBFF", "#9708CC"],
	["#FCCF31", "#F55555"],
	["#F761A1", "#8C1BAB"],
	["#81FBB8", "#28C76F"],
];
// 生成渐变色
function genLinearGradient(colors) {
	const color = {
		type: "linear",
		x: 0,
		y: 0,
		x2: 0,
		y2: 1,
		colorStops: [
			{
				offset: 0,
				color: colors[0], // 0%处的颜色
			},
			{
				offset: 1,
				color: colors[1], // 100%处的颜色
			},
		],
		global: false,
	};
	return color;
}
export default {
	data() {
		return {
			options: {},
		};
	},
	mounted() {
		this.init();
	},
	methods: {
		init() {
			this.options = {
				tooltip: {
					trigger: "axis",
					axisPointer: {
						type: "shadow",
					},
				},
				legend: {
					textStyle: {
						fontSize: 12,
						color: "#6A93B9",
						height: 8,
						rich: {
							a: {
								verticalAlign: "bottom",
							},
						},
					},
				},
				grid: {
					left: "3%",
					right: "4%",
					bottom: "3%",
					containLabel: true,
				},
				xAxis: [
					{
						axisLine: {
							lineStyle: {
								color: "#ddd",
								fontSize: 12,
							},
						},
						axisLabel: {
							// interval:0,
							color: "#ddd",
							fontSize: 12,
						},
						axisTick: {
							show: false,
						},
						type: "category",
						data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
					},
				],
				yAxis: [
					{
						type: "value",
						splitArea: { show: false },
						nameTextStyle: {
							fontSize: 12,
							color: "#ddd",
							align: "center",
						},
						splitLine: {
							lineStyle: {
								color: "rgba(255, 255, 255, 0.15)",
								// type: 'dashed', // dotted 虚线
							},
						},
						axisLine: {
							show: false,
						},
						axisTick: {
							show: false,
						},
						axisLabel: {
							fontSize: 12,
							fontFamily: "Bebas",
							color: "#ddd",
						},
					},
				],
				series: [
					{
						name: "Email",
						type: "bar",
						stack: "Ad",
						barWidth: 10,
						data: [190, 132, 101, 134, 90, 230, 210],
						itemStyle: {
							color: genLinearGradient(basicColors[0]),
							borderRadius: 10,
						},
					},
					{
						name: "Union Ads",
						type: "bar",
						stack: "Ad",
						barWidth: 10,
						data: [220, 182, 191, 234, 290, 330, 310],
						itemStyle: {
							color: genLinearGradient(basicColors[1]),
							borderRadius: 10,
						},
					},
					{
						name: "Video Ads",
						type: "bar",
						stack: "Ad",
						barWidth: 10,
						data: [150, 232, 201, 154, 190, 330, 410],
						itemStyle: {
							color: genLinearGradient(basicColors[2]),
							borderRadius: 10,
						},
					},

					{
						name: "Baidu",
						type: "bar",
						barWidth: 10,
						stack: "Search Engine",
						data: [120, 132, 101, 234, 190, 130, 120],
						itemStyle: {
							color: genLinearGradient(basicColors[3]),
							borderRadius: 10,
						},
					},
					{
						name: "Google",
						type: "bar",
						stack: "Search Engine",
						data: [120, 132, 101, 134, 290, 230, 220],
						itemStyle: {
							color: genLinearGradient(basicColors[4]),
							borderRadius: 10,
						},
					},
					{
						name: "Bing",
						type: "bar",
						stack: "Search Engine",
						data: [60, 72, 71, 74, 190, 130, 110],
						itemStyle: {
							color: genLinearGradient(basicColors[5]),
							borderRadius: 10,
						},
					},
					{
						name: "Others",
						type: "bar",
						stack: "Search Engine",
						data: [62, 82, 91, 84, 109, 110, 120],
						itemStyle: {
							color: genLinearGradient(basicColors[6]),
							borderRadius: 10,
						},
					},
				],
			};
		},
	},
};
</script>

<style lang="scss" scoped></style>
